/*
 *  Questions.js
 *  created by qinghong
 *  2016-7-11
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Navigator,
    WebView,
    ScrollView,
    Image
} from 'react-native';
import Moment from 'moment';

import NavBar from '../../Common/NavBar';
import Constants from '../../Common/Constants';
import OneUrls from '../../Common/OneUrls';
import ActivityView from '../../Common/ActivityView';
import ZanView from '../../Common/ZanView';


export default class Question extends Component {
    constructor(props) {
        super(props);
        this.state = {
            questionData: null,
            loaded: false,
            webViewHeight: 100
        };
    }

    componentDidMount() {
        this.fetchData();
    }

    fetchData() {
        let date = new Date();
        let dateStr = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
        let urlStr = OneUrls.QuestionsUrls.questionsData + '?' + 'strDate=' + dateStr + '&strRow=1';
        console.log(urlStr);
        fetch(urlStr)
            .then((res) => res.json())
            .then((resData) => {
                this.setState({
                    questionData: resData.questionAdEntity,
                    loaded: true
                });
            })
            .done();
    }

    rightAction = () => {
        alert('弹出分享');
    };

    onNavigationStateChange(navState) {
        this.setState({
            webViewHeight: navState.title - 0
        });
    }

    render() {

        if (!this.state.loaded) {
            return (
                <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                    <NavBar
                        titleIcon={require('../../images/navLogo.png')}
                        rightIcon={require('../../images/shareBtn.png')}
                        rightAction={this.rightAction}/>
                    <ActivityView text='正在加载问题数据...'/>
                </View>
            );

        } else {

            let dateStr = Moment().format('MMMM DD, YYYY');
            let queTitle = this.state.questionData.strQuestionTitle;
            let ansTitle = this.state.questionData.strAnswerTitle;

            let queContent = this.state.questionData.strQuestionContent;

            let ansContentHtml = this.state.questionData.strAnswerContent;
            let jsCode = `
                document.title = document.height;
            `;

            let editor = this.state.questionData.sEditor;
            let zanNum = this.state.questionData.strPraiseNumber;


            return (
                <View style={{justifyContent: 'center', alignItems: 'center'}}>
                    <NavBar
                        titleIcon={require('../../images/navLogo.png')}
                        rightIcon={require('../../images/shareBtn.png')}
                        rightAction={this.rightAction}/>
                    <ScrollView style={styles.scrollView}>
                        <Text style={{marginLeft: 10, marginTop: 5, fontSize: 12}}>{dateStr}</Text>
                        <View style={styles.questionView}>
                            <Image source={require('../../images/img_que.png')}
                                   style={{marginLeft: 20, marginRight: 15}}/>
                            <Text style={{fontSize: 15, marginRight: 15, flex: 1}}>
                                {queTitle}
                            </Text>
                        </View>
                        <Text style={{fontSize: 16, marginHorizontal: 10, marginTop: 15, marginBottom: 10, lineHeight: 24}}>
                            {queContent}
                        </Text>
                        <View style={{marginLeft: 10, marginRight: 10, marginVertical: 15,
                                      backgroundColor: 'rgb(210,210,210)', height: 0.5}}/>
                        <View style={[styles.questionView, {marginTop: 0}]}>
                            <Image source={require('../../images/img_ans.png')}
                                   style={{marginLeft: 20, marginRight: 15}}/>
                            <Text style={{fontSize: 15, marginRight: 15, flex: 1}}>
                                {ansTitle}
                            </Text>
                        </View>
                        <WebView style={[styles.webView, {height: this.state.webViewHeight}]}
                                 source={{html: ansContentHtml}}
                                 scrollEnabled={false}
                                 onNavigationStateChange={this.onNavigationStateChange.bind(this)}
                                 injectedJavaScript={jsCode}
                        />
                        <Text style={{marginLeft: 10, marginTop: 5, fontSize: 10}}>{editor}</Text>
                        <View style={{height: 50, marginTop: 20, marginBottom: 10,
                         justifyContent: 'center', alignItems: 'flex-end'}}>
                            <ZanView zanNum={zanNum} style={styles.zanView}/>
                        </View>
                    </ScrollView>
                </View>
            );
        }
    }
}

const styles = StyleSheet.create({
    scrollView: {
        width: Constants.window.screenWidth,
        height: Constants.window.screenHeight - 64 - 49
    },
    questionView: {
        flexDirection: 'row',
        marginTop: 15,
        alignItems: 'center'
    },
    webView: {
        width: Constants.window.screenWidth - 10,
        marginTop: 10,
        marginHorizontal: 5
    },
    zanView: {
        height: 36,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        borderColor: 'gray',
        borderRadius: 18,
        borderWidth: 0.5,
        right: -18
    }
});

